<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水浸动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .water-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .water-overlay.active {
      opacity: 0.6;
    }

    .water-layer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0;
      background: linear-gradient(
        to top,
        rgba(59, 130, 246, 0.8),
        rgba(37, 99, 235, 0.6),
        rgba(29, 78, 216, 0.4),
        transparent
      );
      animation: water-rise 2s ease-out forwards;
    }

    .water-layer-2 {
      animation-delay: 0.3s;
      background: linear-gradient(
        to top,
        rgba(96, 165, 250, 0.6),
        rgba(59, 130, 246, 0.4),
        transparent
      );
    }

    .water-layer-3 {
      animation-delay: 0.6s;
      background: linear-gradient(
        to top,
        rgba(147, 197, 253, 0.4),
        transparent
      );
    }

    @keyframes water-rise {
      from {
        height: 0;
      }
      to {
        height: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="water-overlay" id="waterOverlay">
    <div class="water-layer"></div>
    <div class="water-layer water-layer-2"></div>
    <div class="water-layer water-layer-3"></div>
  </div>

  <script type="module">
    import { listen } from '@tauri-apps/api/event';

    const overlay = document.getElementById('waterOverlay');

    // 监听显示动画事件
    listen('show-water-animation', () => {
      overlay.classList.add('active');
    });

    // 监听隐藏动画事件
    listen('hide-water-animation', () => {
      overlay.classList.remove('active');
    });
  </script>
</body>
</html>

